{extend name="./tpl/default/mobile/public/layout.html" /}
{block name="header"}
<link rel="stylesheet" href="/public/home/mobile/css/guanjian/anli.css">
<link rel="stylesheet" href="/public/home/mobile/css/guanjian/gonglv.css">
<link rel="stylesheet" href="/public/home/mobile/css/guanjian/chanpinliebiao.css">
{/block}
{block name="head"}
<style>
    .am-header-default{
        background-color: #fff;
    }
    .am-thumbnail{margin-bottom:0; border: 0; padding: 3px}
    #qist .qinaz {height: 38vw;background-size: cover;background-repeat: no-repeat;;background-position: center center;margin: 3px auto; }
</style>
<header data-am-widget="header"
        class="am-header am-header-default">
    <div class="am-header-left am-header-nav" onclick="history.back(-1)">
        <span class="icon iconfont icon-xiangzuojiantou" style="color: #989898;"></span>
    </div>

    <h1 class="am-header-title" style="color:#424242;">
        全部分类
    </h1>

    <div class="am-header-right am-header-nav">
        <a href="{:url('search')}"><span class="icon iconfont icon-sousuo" style="color: #989898;"></span></a>
    </div>
</header>
{/block}
{block name="body"}

    {include file="./tpl/default/mobile/goods/left.html"}
    <div class="right_list" style="position: absolute;width: 100%;">
        <div class="am-g" id="list" style="position: relative;padding-left: 80px;width: 100%;margin-bottom: 55px;margin-top: 2px;" >
        </div>
    </div>
    {/block}

    {block name="script"}
    <script src="/public/plugins/template/template.js"></script>
    <script src="/public/plugins/dropload/dropload.js"></script>
    <script type="text/html" id="list-tpl">
        {{each data as val index}}
        <div class="am-u-sm-6 am-u-sm-end" id="qist"  style="border: 1px solid #ccc;text-align: center;border-left: 0;margin-bottom: 15px; padding:0; float:left;">
            <div class="am-thumbnail">
                <a href="{{ val.url}}">
                    <div class="qinaz" style="background-image:url('{{ val.goods_thumb}}')"></div>
            </a>
            <a href="{{ val.url}}">
                <div class="am-thumbnail-caption">
                    <h3 class="am-thumbnail-caption" style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;padding: 0px;">{{ val.fulltitle}}
                    </h3>
                    <h3 class="am-thumbnail-caption" style="padding: 0px;margin-bottom: 10px;">￥ <b style="color: #c30d23;">{{ val.simple_price}}</b>/{{val.goods_unit}}
                    </h3>
                </div>
            </a>
        </div>
</div>
        {{/each}}
    </script>
    <script>
        var datas = {
            page: 0,
            p1: 'goods_sort',
            p2: 'asc'
        };
        var drop = $('#page').dropload({
            scrollArea: window,
            loadDownFn: function (me) {
                datas.page++;
                $.ajax({
                    url: "{:url('/home/Goods/itemList')}",
                    data: {cid: "{$currentCat.cid}", p1: datas.p1, p2: datas.p2},
                    success: function (data) {
                        if (datas.page >= data.last_page) {
                            me.noData();
                            me.lock();
                        }
                        var html = template('list-tpl', data);
                        $('#list').append(html);
                        me.resetload();
                    }
                });
            }
        });

        function setOrder(order) {
            if (order === 'goods_sort') {
                datas.p1 = order;
                datas.p2 = 'asc'
            }
            if (order === 'sale_number') {
                datas.p1 = order;
                datas.p2 = 'desc'
            }
            if (order === 'market_price') {
                datas.p1 = order;
                if (datas.p1 === 'market_price') {
                    datas.p2 = datas.p2 === 'desc' ? 'asc' : 'desc';
                } else {
                    datas.p2 = 'asc'
                }
            }
            $('#list').empty();
            drop.noData(false);
            drop.unlock();
            drop.resetload();
        }
    </script>
    {/block}
